<template>
    <div class="front">
        <div class="front-left">
            <van-nav-bar title="我的购物车" left-text="返回" left-arrow @click-left="$router.back()" />
        </div>
    </div>
    <div class="bags-main">
        <div class="overbox">
            <div class="item" v-for="it in listArr" :key="it.id">
                <van-checkbox v-model="it.check" checked-color="#000000" style="margin-top: 10%;margin-right: 10px;">

                </van-checkbox>
                <img :src="it.img" alt="图片未加载">
                <div style="margin-left: 15px ;position: relative;">
                    <span
                        style="font-size: 0.6rem;overflow: hidden;width: 200px;height: 30px;position: absolute;;top: 10px;">{{
                            it.title }}</span>
                    <span style="font-size: 0.6rem; margin-top:100%;">￥{{ it.price }}</span>
                    <div class="pay" style="position: relative;">

                        <span style="font-size: 0.6rem; color: #828282; width: 100%; display: flex; justify-self: right: ;">
                            共{{ it.price * it.pcount }}元
                        </span>
                        <van-stepper v-model="it.pcount" disable-input button-size="25px" integer
                            style=" display: flex;flex-direction:row ;position: absolute;left: 200%; " />

                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="footer">
        <div class="every" style="display: flex; ">
            <div>
                <van-checkbox v-model="checkbox" checked-color="#000000" style="margin-top: 80%;margin-right: 10px;">
                </van-checkbox>
            </div>
            <!-- <div style="display: flex;align-items: center;">
                <div class="number_total" style="font-size: 0.8rem;">一共999件</div>
                <div class="money_total" style="font-size: 0.8rem;">一共999元</div>
            </div> -->
            <div class="ft">
                <span>共 {{ counts }} 件</span>
                <span>共 {{ yuan }} 元</span>
            </div>

        </div>
        <div class="sole">
            <van-button round type="success">立即购买</van-button>
        </div>

    </div>

</template>
<script setup lang="ts">

import { ref, watchEffect } from 'vue';
import { useRouter } from 'vue-router';
import { cartListApi } from '../../apis/cartApi';
import { PINIA_CACHE_KEY } from '../../config/common.cfg';
import { decodeApi } from '../../utils/index';
const router = useRouter()
let listArr = ref([])
const id: any = JSON.parse(decodeApi(sessionStorage.getItem(PINIA_CACHE_KEY))).token
back()
async function back() {
    let res = await cartListApi(id)
    listArr.value = res.map(it => {
        it.check = true
        counts.value += it.pcount
        yuan.value += it.pcount * it.price 
        return it
    })
}


const checkbox = ref(false)
//实现购物车功能
let counts = ref(0)
let yuan = ref(0)

</script>

<style scoped lang="less">
@import url(../../style/common.less);

.app-container {
    .rel();
    .front{
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
    }
    .bags-main {
        width: 100%;
        height: calc(100% -120px);
        background-color: #ffffff;
        overflow-x: hidden;
        margin-left: 6px;
        margin-top: 50px;

        .overbox {
            // height: 1000px;
            margin-right: 100px;



            .item {
                margin-top: 20px;
                display: flex;
                flex-direction: row;


                div {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }

                img {
                    width: 4rem;
                    height: 4rem;
                }

                div {
                    .pay {
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;

                        span {}

                        .sole {
                            position: relative;
                            width: 60px;
                            height: 25px;
                            font-size: 0.8rem;
                            left: 160px;
                            top: 3px;
                            border-radius: 120px;
                            border: 2px black solid;

                            span {
                                margin: 0 auto;
                                font-size: 0.8rem;

                            }
                        }
                    }
                }
            }
        }

    }
}

.footer {
    position: fixed;
    bottom: 50px;
    bottom: 50px;
    width: 100%;
    height: 70px;
    background-color: @c5; // 可以给底部增加颜色，以区分页面内容

    .every {
        display: flex;
        flex-direction: row;

        .ft {
            line-height: 70px;

            span {
                padding: 0 10px;

                &:last-child {
                    margin-left: 60px;
                }
            }

        }

    }

    .sole {
        position: absolute;
        top: 16%;
        left: 100% - 25px;
    }
}

::v-deep .van-nav-bar__text {
    color: black;
}

::v-deep .van-nav-bar__arrow {
    color: black;
}</style>